<script setup lang="ts">
import UvLine from '@/uv-ui/components/nv-line/uv-line.vue'

function handleClickLeft() {
  uni.navigateBack()
}

function toAdd() {
  uni.navigateTo({ url: '/pages/addIngredients/addIngredientsGroupAdd' })
}
</script>

<template>
  <view class="h-full flex flex-col overflow-hidden">
    <wd-navbar title="加料管理" left-text="返回" left-arrow @click-left="handleClickLeft" />
    <scroll-view class="box-border flex-1 overflow-hidden p-[10px]" scroll-y>
      <wd-cell title="加料支持单独售卖" class="rounded-lg">
        <wd-switch size="22px" />
      </wd-cell>
      <view class="my-2">
        <uv-line />
      </view>
      <view class="mx-[20px]">
        <wd-text text="加料分组" bold size="16px" color="#333" />
      </view>
      <wd-cell title="烤鱼配菜" class="mt-3 rounded-lg" label="平菇、宽粉" center>
        <view class="i-icon-park-outline-edit" />
      </wd-cell>
    </scroll-view>
    <view class="flex border-t-1 border-border border-t-solid bg-white p-4">
      <wd-button type="text">
        <view class="flex flex-col items-center justify-center">
          <view class="i-icon-park-outline-sort-two text-main" />
          <text class="mt-1 text-[10px] text-main leading-none">排序</text>
        </view>
      </wd-button>
      <wd-button type="primary" :round="false" class="ml-4 flex-1" @click="toAdd">
        新建加料分组
      </wd-button>
    </view>
  </view>
</template>

<style scoped lang="scss"></style>
